<template>
  <div>
    <div
      id="work"
      style="width:100%; height:600px; background-color: #DAE4E4;"
    ></div>
  </div>
</template>

<script>
import go from 'gojs'
export default {
  mounted() {
    let $ = go.GraphObject.make
    let myDiagram = $(go.Diagram, 'work', {
      // enable Ctrl-Z to undo and Ctrl-Y to redo
      'undoManager.isEnabled': true,
       allowZoom: false,
      scrollMode: go.Diagram.InfiniteScroll, // allow the diagram to be scrolled beyond content
      padding: 0, // scales should be allowed right up against the edges of the viewport
      'grid.visible': true
    })

    myDiagram.nodeTemplate = $(
      go.Node,
      'Auto',
      $(
        go.Shape,
        'RoundedRectangle',
        { strokeWidth: 0, portId: '', fromLinkable: true, toLinkable: true },
        new go.Binding('fill', 'color')
      ),

      $(go.TextBlock, { margin: 8 }, new go.Binding('text', 'key'))
    )

    myDiagram.model = new go.GraphLinksModel(
      [
        { key: 'Alpha', color: 'lightblue' },
        { key: 'Beta', color: 'orange' },
        { key: 'Gamma', color: 'lightgreen' },
        { key: 'Delta', color: 'pink' }
      ],
      [
        { from: 'Alpha', to: 'Beta' },
        { from: 'Alpha', to: 'Gamma' },
        { from: 'Beta', to: 'Beta' },
        { from: 'Gamma', to: 'Delta' },
        { from: 'Delta', to: 'Alpha' }
      ]
    )

    // Keep references to the scales and indicators to easily update them
    var gradScaleHoriz = $(
      go.Part,
      'Graduated',
      { graduatedTickUnit: 10, pickable: false, layerName: 'Grid', isAnimated: false },
      $(go.Shape, { geometryString: 'M0 0 H400' }),
      $(go.Shape, { geometryString: 'M0 0 V3', interval: 1 }),
      $(go.Shape, { geometryString: 'M0 0 V15', interval: 5 }),
      $(go.TextBlock, {
        font: '10px sans-serif',
        interval: 5,
        alignmentFocus: go.Spot.TopLeft,
        segmentOffset: new go.Point(0, 7)
      })
    )

    var gradScaleVert = $(
      go.Part,
      'Graduated',
      { graduatedTickUnit: 10, pickable: false, layerName: 'Grid', isAnimated: false },
      $(go.Shape, { geometryString: 'M0 0 V400' }),
      $(go.Shape, { geometryString: 'M0 0 V3', interval: 1, alignmentFocus: go.Spot.Bottom }),
      $(go.Shape, { geometryString: 'M0 0 V15', interval: 5, alignmentFocus: go.Spot.Bottom }),
      $(go.TextBlock, {
        font: '10px sans-serif',
        segmentOrientation: go.Link.OrientOpposite,
        interval: 5,
        alignmentFocus: go.Spot.BottomLeft,
        segmentOffset: new go.Point(0, -7)
      })
    )

    gradIndicatorHoriz = $(
      go.Part,
      {
        pickable: false,
        layerName: 'Grid',
        visible: false,
        isAnimated: false,
        locationSpot: go.Spot.Top
      },
      $(go.Shape, { geometryString: 'M0 0 V15', strokeWidth: 2, stroke: 'red' })
    )

    gradIndicatorVert = $(
      go.Part,
      {
        pickable: false,
        layerName: 'Grid',
        visible: false,
        isAnimated: false,
        locationSpot: go.Spot.Left
      },
      $(go.Shape, { geometryString: 'M0 0 H15', strokeWidth: 2, stroke: 'red' })
    )

    // Add listeners to keep the scales/indicators in sync with the viewport
    myDiagram.addDiagramListener('InitialLayoutCompleted', setupScalesAndIndicators)
    myDiagram.addDiagramListener('ViewportBoundsChanged', updateScales)
    myDiagram.addDiagramListener('ViewportBoundsChanged', updateIndicators)
    // Override mousemove Tools such that doMouseMove will keep indicators in sync
    myDiagram.toolManager.doMouseMove = function() {
      go.ToolManager.prototype.doMouseMove.call(this)
      updateIndicators()
    }
    myDiagram.toolManager.linkingTool.doMouseMove = function() {
      go.LinkingTool.prototype.doMouseMove.call(this)
      updateIndicators()
    }
    myDiagram.toolManager.draggingTool.doMouseMove = function() {
      go.DraggingTool.prototype.doMouseMove.call(this)
      updateIndicators()
    }
    myDiagram.toolManager.dragSelectingTool.doMouseMove = function() {
      go.DragSelectingTool.prototype.doMouseMove.call(this)
      updateIndicators()
    }
    // No need to override PanningTool since the ViewportBoundsChanged listener will fire

    function setupScalesAndIndicators() {
      myDiagram.commit(function(d) {
        // Add each node to the diagram
        d.add(gradScaleHoriz)
        d.add(gradScaleVert)
        d.add(gradIndicatorHoriz)
        d.add(gradIndicatorVert)
        updateScales()
        updateIndicators()
      }, null) // null says to skip UndoManager recording of changes
    }

    function updateScales() {
      var vb = myDiagram.viewportBounds
      if (!vb.isReal()) return
      myDiagram.commit(function(diag) {
        // Update properties of horizontal scale to reflect viewport
        gradScaleHoriz.location = new go.Point(vb.x, vb.y)
        gradScaleHoriz.graduatedMin = vb.x
        gradScaleHoriz.graduatedMax = vb.right
        gradScaleHoriz.scale = 1 / diag.scale
        // Update properties of vertical scale to reflect viewport
        gradScaleVert.location = new go.Point(vb.x, vb.y)
        gradScaleVert.graduatedMin = vb.y
        gradScaleVert.graduatedMax = vb.bottom
        gradScaleVert.scale = 1 / diag.scale
      }, null)
    }

    function updateIndicators() {
      var vb = myDiagram.viewportBounds
      if (!vb.isReal()) return
      myDiagram.commit(function(diag) {
        var mouseCoords = diag.lastInput.documentPoint
        // Keep the indicators in line with the mouse as viewport changes or mouse moves
        gradIndicatorHoriz.location = new go.Point(Math.max(mouseCoords.x, vb.x), vb.y)
        gradIndicatorHoriz.scale = 1 / diag.scale
        gradIndicatorVert.location = new go.Point(vb.x, Math.max(mouseCoords.y, vb.y))
        gradIndicatorVert.scale = 1 / diag.scale
      }, null)
    }

    //mounted
  }
}
</script>

<style scoped></style>
